<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
       .search{
    position: relative;
}
.js-input{
    width: 450px;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    padding: 8px;
    border: 1px solid #cccccc;
    outline: none;
}
.js-suggest{
    width: 466px;
    font-size: 14px;
    border: 1px solid #cccccc;
    background: #ffffff;
    position: absolute;
    left: 0;
    top: 39px;
}
.js-suggest.hide{
    display: none;
}
.js-suggest ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
.js-suggest ul li{
    color: #000;
    font: 14px arial;
    line-height: 25px;
    padding: 0 8px;
    position: relative;
    cursor: default;
}
.js-suggest ul li:hover{
    background: #f0f0f0;
}
    </style>
</head>
<body>
    <div class="search">
    <div><input type="text" class="js-input" value="的"></div>
    <div class="js-suggest">
        <ul>
            <li>根据输入框的值</li>
            <li>从给定字符串数组中筛选出匹配的数据，依次显示在li节点中</li>
            <li>如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点</li>
        </ul>
    </div>
</div>
    <script type="text/javascript">
        /* 简化版的搜索框智能提示功能，按要求完成suggest函数
1. 当输入框的值发生变化时，系统会调用suggest函数，用于显示/隐藏智能提示数据，参数items为一个字符串数组
2. 当items中的字符串和输入框的值匹配时，将匹配的数据一次选人在ul下的li节点中，并显示.js-suggest节点，否则移除ul下的所有li节点，并隐藏.js-suggest节点
3. 输入框的值需要移除两侧空白再进行匹配
4. 输入框的值为空时，按照全部不匹配处理
5. 字符串使用模糊匹配
6. 通过再.js-suggest节点上添加/移除hide这个class来控制该节点的隐藏或显示
*/
function suggest(items) {
    let ipt = document.querySelector('.js-input').value;
    let dv = document.querySelector('.js-suggest');
    let ul = document.querySelector('ul');
    let len = ul.children.length;
    // console.log('len', len);

    // 清空ul
    for (let i = 0; i < len; i++) {
        let li = document.querySelector('li');
        ul.removeChild(li);
    }
    // console.log(ul.children.length);

    ipt = ipt.trim();
    // 输入为空
    if (!ipt) {
        dv.classList.add('hide');
        return;
    }
    // 构造正则，判断input输入字符串是否在js_suggest中
    // 构造reg的时候，ipt如果是特殊字符，要转义
    let reg = '';
    const regKey = ['(', ')', '.', '?', '^', '/', '\\', '*', '[', ']', '|', '+', '{', '}', '$'];
    console.log(regKey.length);
    for (i of ipt) {
        if (regKey.includes(i)) {
            i = '\\' + i;
        }
        reg += i +'.*?';
    }
    // console.log(reg);
    reg = new RegExp(reg);

    // 匹配
    for (i of items) {
        if (reg.test(i)) {
            let tip = document.createElement('li');
            tip.innerHTML = i;
            ul.appendChild(tip);
        }
    }
    dv.appendChild(ul); // 匹配成功后在js_suggest 中输出匹配的字符串
    // 要考虑ipt不为空但是没有匹配到
    if (ul.children.length){
        dv.classList.remove('hide');
    } else {
        dv.classList.add('hide');
    }
}
    </script>
</body>

</html>